<template>
  <div class="page-common-layout manage-planning-container">
    <div class="table-container">
      <div class="operate-group-btns">
        <a-button
          type="primary"
          icon="plus"
          @click="handleAddModal({}, 1)"
          v-action:sgxkz_add
        >
          新增
        </a-button>
      </div>
      <div class="view-table-container">
        <vxe-table
          ref="xTable"
          align="left"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="tableLoading"
          height="auto"
          :row-config="{ isCurrent: true, isHover: true }"
          @current-change="currentChangeEvent"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="fileCode" title="文件编号"> </vxe-column>
          <vxe-column field="fileName" title="名称" min-width="200">
          </vxe-column>
          <vxe-column field="publicationDay" title="发文时间"> </vxe-column>
          <vxe-column title="成果文件" width="100">
            <template #default="{ row}">
              <div class="files-icon">
                <!-- 预览 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    预览
                  </template>
                  <a-icon
                    type="eye"
                    class="preview-btn"
                    @click="handelFileModal(row)"
                  />
                </a-tooltip>
                <!-- 下载 -->
                <a-tooltip placement="top" v-action:shxkz_download>
                  <template slot="title">
                    下载
                  </template>
                  <a-icon
                    type="download"
                    class="download-btn"
                    @click="downloadFile(2, row)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="creator" title="提交人"> </vxe-column>
          <vxe-column field="createTime" title="提交时间"> </vxe-column>
          <vxe-column field="remark" title="备注"> </vxe-column>
          <vxe-column
            field="operate"
            width="100"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <!-- 编辑 -->
                <a-tooltip v-action:sgxkz_edit>
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon type="edit" @click="handleAddModal(row, 2)" />
                </a-tooltip>
                <!-- 删除 -->
                <a-tooltip v-action:sgxkz_delete>
                  <template slot="title">
                    删除
                  </template>
                  <a-icon type="delete" @click="handleDelClick(row)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <div class="file-container">
      <div class="header">
        查看/下载
        <a-button
          type="primary"
          icon="download"
          @click="handleBatchDownload()"
          :loading="downloadLoading"
          :disabled="downloadLoading"
          v-action:shxkz_download
        >
          {{ downloadLoading ? "下载中" : "批量下载" }}
        </a-button>
      </div>
      <div class="main" id="preview-container">
        <!-- 文件列表 -->
        <div class="file-list">
          <div class="sub-header">
            文件列表
          </div>
          <div class="sub-main">
            <a-empty v-if="fileList.length == 0" :description="false" />
            <template v-else>
              <div
                class="file-item"
                v-for="(item, index) in fileList"
                :key="index"
                :class="[activeIndex == index && 'active']"
              >
                <div
                  class="icon"
                  :class="[getFileIconName(item.fileName)]"
                ></div>
                <div class="name" @click="handleActiveFile(item, index)">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.fileName }}
                    </template>
                    {{ item.fileName }}
                  </a-tooltip>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- 文件预览 -->
        <div class="file-view">
          <div class="tip-name">
            <!-- 文件信息 -->
            <div class="file-info">
              <div class="block">
                <div
                  class="icon"
                  :class="[getFileIconName(currentFile.fileName)]"
                ></div>
              </div>
              <div class="info-content">
                <div class="info-name">{{ currentFile.fileName || "-" }}</div>
                <div class="user">
                  {{ currentFile.creator || "-" }}
                  <div class="drop"></div>
                  {{ currentFile.createTime || "-" }}
                </div>
              </div>
            </div>
            <div class="operate">
              <!-- 下载 -->
              <div
                class="block"
                @click="downloadFile(1)"
                title="下载"
                v-action:shxkz_download
              >
                <a-icon type="download" />
              </div>
              <!-- 全屏 -->
              <div
                class="block"
                :title="isFull ? '退出全屏' : '全屏'"
                @click="!isFull ? handleFullScreen() : exitFullscreen()"
              >
                <a-icon :type="isFull ? 'fullscreen-exit' : 'fullscreen'" />
              </div>
            </div>
          </div>
          <div class="view-container">
            <iframe
              v-if="fileUrl && fileList.length > 0"
              :src="fileUrl"
              frameborder="0"
              id="preFileIframe"
              width="100%"
              height="100%"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
    <!-- 多文件 -->
    <viewFileModal
      :visible.sync="viewFileModal.visible"
      :fileList="viewFileModal.fileList"
      :subtitle="viewFileModal.name"
    ></viewFileModal>
    <!-- 单文件 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>

    <!-- 新增 -->
    <addModal
      :visible.sync="addModal.visible"
      :parameter="addModal.soucre"
      :operateType="addModal.operateType"
    ></addModal>
  </div>
</template>

<script>
//施工许可证
import { axios } from "@/utils/request";
import { getFileIconName } from "@/utils/util.js";
import { mapGetters } from "vuex";
//多文件预览
import viewFileModal from "@/components/extendCustom/view-file-modal";
//单文件预览
import previewModal from "@/pages/document/minio/previewModal";
//新增
import addModal from "./components/addModal";

import {
  getToken,
  downloadDfs,
  downLoadBatchFileByArraybuffer,
} from "@/utils/TopVUI";
export default {
  components: {
    viewFileModal,
    previewModal,
    addModal,
  },
  data() {
    return {
      //列表
      tableData: [],
      tableLoading: false,
      //文件列表
      fileList: [],
      activeIndex: 0,
      //选择的文件
      currentFile: {},
      //文件地址
      fileUrl: "",
      //下载
      downloadLoading: false,
      //选择的行
      currentRows: {},
      //全屏状态
      isFull: false,
      //多文件预览
      viewFileModal: {
        name: "",
        visible: false,
        fileList: [],
      },
      //单文件预览
      previewModal: {
        visible: false,
        loading: false,
      },
      //新增
      addModal: {
        visible: false,
        soucre: {},
        operateType: 1,
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
    });
    this.getTableData();
  },
  methods: {
    getFileIconName,
    //新增、编辑
    handleAddModal(row, type) {
      this.addModal.operateType = type;
      this.addModal.soucre = row;
      this.addModal.visible = true;
    },

    //删除
    handleDelClick(row) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          axios
            .post(
              `/probusiness/constructionPermit/deleteBatch?varchar=${row.uuid}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //查列表
    getTableData() {
      this.tableLoading = true;
      axios
        .post(
          `/probusiness/constructionPermit/getList`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.tableData = res?.data ?? [];
          this.currentRows = this.tableData?.[0] ?? {};
          this.$refs.xTable.setCurrentRow(this.currentRows);
          this.getRowData(this.currentRows);
        })
        .catch((_) => {
          this.tableData = [];
          this.fileList = [];
        })
        .finally((_) => {
          this.tableLoading = false;
        });
    },

    //行选中
    currentChangeEvent({ row, rowIndex }) {
      this.activeIndex = 0;
      this.currentRows = row;
      this.getRowData(row);
    },

    getRowData(data) {
      this.fileList = JSON.parse(data?.files ?? "[]");
      this.currentFile = this.fileList?.[0] ?? {};
      this.getFileUrl();
    },

    //选择文件
    handleActiveFile(item, index) {
      this.activeIndex = index;
      this.currentFile = item;
      this.getFileUrl();
    },

    //批量下载
    handleBatchDownload() {
      let { uuid, fileName } = this.currentRows;
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/constructionPermit/batchExportZip?fileUuid=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, fileName);
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //全选
    allClick() {
      this.fileList.forEach((v) => {
        this.$set(v, "select", true);
      });
    },

    //预览
    getFileUrl() {
      let { url } = this.currentFile;
      this.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
    },

    //下载
    downloadFile(type, row) {
      if (type == 1) {
        let { url } = this.currentFile;
        downloadDfs(url);
      }
      if (type == 2) {
        const fileList = JSON.parse(row?.files ?? "[]");
        if (fileList.length == 0) {
          return;
        } else if (fileList.length == 1) {
          let { url } = fileList?.[0] ?? {};
          downloadDfs(url);
        } else {
          this.viewFileModal.name = "成果文件";
          this.viewFileModal.fileList = fileList ?? [];
          this.viewFileModal.visible = true;
        }
      }
    },

    //预览
    handelFileModal(row) {
      const fileList = JSON.parse(row?.files ?? "[]");
      if (fileList.length == 0) {
        return;
      } else if (fileList.length == 1) {
        let { url } = fileList?.[0] ?? {};
        this.previewModal.loading = true;
        this.$refs.previewModal.type = "file";
        this.$refs.previewModal.fileUrl =
          this.kkFileView +
          "/onlinePreview?url=" +
          encodeURIComponent(Base64.encode(url)) +
          "&watermarkTxt=" +
          //水印内容
          encodeURIComponent("") +
          "&token=" +
          getToken();
        this.previewModal.visible = true;
        this.previewModal.loading = false;
      } else {
        this.viewFileModal.name = "成果文件";
        this.viewFileModal.fileList = fileList ?? [];
        this.viewFileModal.visible = true;
      }
    },

    //全屏
    handleFullScreen() {
      const element = document.getElementById("preview-container");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },

    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.manage-planning-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .table-container {
    margin-bottom: 10px;
    flex-shrink: 0;
    height: 254px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    padding: 0 16px 20px 16px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .operate-group-btns {
      margin: 10px 0;
    }

    .view-table-container {
      flex: 1;
    }

    .files-icon {
      .disabled {
        color: #d4d7d8 !important;
      }
      .anticon {
        cursor: pointer;
        font-size: 18px;
        color: #1677ff;
        margin-right: 16px;
        &:last-of-type {
          margin-right: 0;
        }
      }
      .anticon-download,
      .anticon-cloud-upload {
        color: #239b53;
      }
    }
  }
  .file-container {
    flex: 1;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333333;
      padding: 10px 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #d4d7d8;
    }
    .main {
      flex: 1;
      padding: 10px 16px;
      box-sizing: border-box;
      display: flex;
      overflow: hidden;
      background: #ffffff;
      .icon {
        width: 18px;
        height: 18px;
        margin: 0 10px;
        flex-shrink: 0;
        &.pdf {
          background: url("~@/assets/img/fileIcon/pdf.png");
          background-size: 100% 100%;
        }
        &.doc {
          background: url("~@/assets/img/fileIcon/doc.png");
          background-size: 100% 100%;
        }
        &.xls {
          background: url("~@/assets/img/fileIcon/xls.png");
          background-size: 100% 100%;
        }
        &.ppt {
          background: url("~@/assets/img/fileIcon/ppt.png");
          background-size: 100% 100%;
        }
        &.image {
          background: url("~@/assets/img/fileIcon/image.png");
          background-size: 100% 100%;
        }
        &.txt {
          background: url("~@/assets/img/fileIcon/txt.png");
          background-size: 100% 100%;
        }
        &.zip {
          background: url("~@/assets/img/fileIcon/zip.png");
          background-size: 100% 100%;
        }
        &.music {
          background: url("~@/assets/img/fileIcon/music.png");
          background-size: 100% 100%;
        }
        &.video {
          background: url("~@/assets/img/fileIcon/video.png");
          background-size: 100% 100%;
        }
        &.annex {
          background: url("~@/assets/img/fileIcon/annex.png");
          background-size: 100% 100%;
        }
        &.cad {
          background: url("~@/assets/img/fileIcon/cad.png");
          background-size: 100% 100%;
        }
      }
      .file-list {
        width: 300px;
        border-radius: 4px 0px 0px 4px;
        border: 1px solid #d4d7d8;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .sub-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 16px;
          box-sizing: border-box;
          font-size: 16px;
          color: #333333;
          .all-select {
            font-size: 14px;
            color: #1890ff;
            cursor: pointer;
          }
        }
        .sub-main {
          flex: 1;
          overflow: auto;
          position: relative;
          /deep/.ant-empty {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          .file-item {
            height: 32px;
            padding: 0 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            margin-bottom: 8px;
            .name {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
            &.active {
              background: rgba(24, 144, 255, 0.1);
              .name {
                color: #1890ff;
              }
            }
          }
        }
      }
      .file-view {
        background: #f7f7f7;
        flex: 1;
        border-radius: 0 4px 4px 0px;
        border: 1px solid #d4d7d8;
        border-left: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        .tip-name {
          height: 64px;
          width: 100%;
          background: #ffffff;
          border-radius: 0px 4px 0px 0px;
          border-bottom: 1px solid #d4d7d8;
          padding: 0 16px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .block {
            width: 32px;
            height: 32px;
            background: #ffffff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
            border-radius: 4px 4px 4px 4px;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .file-info {
            display: flex;
            align-items: center;
            .info-content {
              .info-name {
                font-size: 14px;
                color: #333333;
              }
              .user {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #8a9295;
                .drop {
                  margin: 0 8px;
                  width: 4px;
                  height: 4px;
                  background: #8a9295;
                  border-radius: 10px 10px 10px 10px;
                }
              }
            }
          }
          .operate {
            display: flex;
            align-items: center;
            .block {
              cursor: pointer;
              &:last-of-type {
                margin-right: 0;
              }
            }
          }
        }
        .view-container {
          flex: 1;
        }
      }
    }
  }
}
</style>
